<template>
  <div class="app">
    <div class="top">
      <el-form :model="form" size="small" :inline="true" label-width="68px">
        <!--      搜索的搜索框-->
        <el-form-item label="姓名" prop="ename">
          <el-input v-model="ID" placeholder="会员号/手机号/会员"/>
        </el-form-item>
        <el-button type="primary" @click="souButoon">搜索</el-button>
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="medium"
          @click="handleAdd"
          v-hasPermi="['system:classmates:add']"
        >新增
        </el-button>
      </el-form>
      <div>
        <el-dialog title="新增Vip" :visible.sync="addOpen" width="500px" append-to-body>
          <el-form ref="form" :model="addForm" label-width="80px">
            <el-form-item label="ID" prop="vid">
              <el-input v-model="addForm.vid" placeholder="请输入会员ID"/>
            </el-form-item>
            <el-form-item label="会员类型" prop="vtype">
              <el-input v-model="addForm.vtype" placeholder="请输入会员类型"/>
            </el-form-item>
            <!--            顾客的数据信息-->
            <div>
              <span style="margin:0 10px;font-weight: bold">顾客信息</span>
              <select class="customer"
                      v-model="Cvalue" @click="changeCustomer()"
                      style="width:100px;height:40px;border: 1px solid rgba(0,0,0,0.1);border-radius: 5px">
                <option label="请选择:" selected>请选择:</option>
                <option v-for="c in customerList" :value="c.id">
                  {{c.id}}--{{c.name}}--{{c.storageMoney}}
                </option>
              </select>
            </div>
            <!--            <el-form-item label="姓名" prop="name">-->
            <!--              <el-input v-model="addForm.name" placeholder="请输入姓名"/>-->
            <!--            </el-form-item>-->
            <!--            <el-form-item label="电话" prop="phone">-->
            <!--              <el-input v-model="addForm.phone" placeholder="请输入电话"/>-->
            <!--            </el-form-item>-->
            <!--            <el-form-item label="邮箱" prop="email">-->
            <!--              <el-input v-model="addForm.email" placeholder="请输入邮箱"/>-->
            <!--            </el-form-item>-->
            <!--            <el-form-item label="储值余额" prop="storageMoney">-->
            <!--              <el-input v-model="addForm.storageMoney" placeholder="请输入储值余额"/>-->
            <!--            </el-form-item>-->
            <!--            <el-form-item label="邮箱" prop="email">-->
            <!--              <el-input v-model="addForm.email" placeholder="请输入邮箱"/>-->
            <!--            </el-form-item>-->
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addSubmit()">确 定</el-button>
            <el-button @click="addOpen = false">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
    <div class="showData">
      <template>
        <el-table
          :data="vipList" border style="width: 100%">
          <el-table-column fixed prop="id" label="序号" width="50">
          </el-table-column>
          <el-table-column prop="vip.vid" label="会员号" width="150">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="150">
          </el-table-column>
          <el-table-column prop="viptype.name" label="会员类别" width="150">
          </el-table-column>
          <el-table-column prop="viptype.discount" label="折扣" width="150">
          </el-table-column>
          <el-table-column prop="points" label="积分" width="150">
          </el-table-column>
          <el-table-column prop="storageMoney" label="储值余额" width="150">
          </el-table-column>
          <el-table-column prop="phone" label="手机号" width="150">
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="updateVip(scope.row)" type="text" size="small">修改</el-button>
              <!--  修改的弹出框-->
              <div>
                <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
                  <el-form :model="form" label-width="80px">
                    <el-form-item label="姓名">
                      <el-input v-model="form.name" placeholder="请输入姓名:"/>
                    </el-form-item>
                    <el-form-item label="储值余额">
                      <el-input v-model="form.storageMoney" placeholder="请输入储值余额:"/>
                    </el-form-item>
                    <el-form-item label="电话号码:">
                      <el-input v-model="form.phone" placeholder="请输入手机号:"/>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="submitForm(scope.row)">确 定</el-button>
                    <el-button @click="open=false">取 消</el-button>
                  </div>
                </el-dialog>
              </div>
              <el-button type="text" size="small" @click="deleteClick(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <div style="margin-right: 100px">
      <el-pagination
        background
        layout="prev, pager, next,total"
        :current-page.sync="queryParams.pageNo"
        :page-size="queryParams.pageSize"
        @prev-click="getPrePage"
        @next-click="getNextPage"
        @current-change="handleCurrentChange"
        :total="total"
        :hide-on-single-page="true">
      </el-pagination>
    </div>
  </div>

</template>

<script>
  import {listVip, delVip, updateVip, queryVipById, updateAndQuery, addVip, listCustomer} from '@/api/vip/vip';
  import Operlog from "../../monitor/operlog/index";

  export default {

    name: "index",
    components: {Operlog},
    data() {
      return {
        //整个页面的数据
        vipList: [],
        customerList: [],
        //搜索需要的数据
        ID: "",
        //修改绑定的数据
        form: {},
        // 是否显示弹出层
        open: false,
        addOpen: false,
        //弹出框的主题
        title: "修改会员",
        //分页需要的数据
        queryParams: {
          pageNo: 1,
          pageSize: 2,
        },
        total: 0,
        addForm: {},
        Cvalue: ""
      }
    },
    methods: {
      //获取全部数据的方法
      getVipList() {
        listVip(this.queryParams).then(response => {
          this.vipList = response.data.list;
          this.total = response.data.total;
        });
        listCustomer().then(response1 => {
          this.customerList = response1.data;
        });
      },
      //调用删除的方法
      deleteClick(row) {
        console.log(row)
        //拿到本条数据的ID调用js中的删除方法进行删除
        const eid = row.id;
        this.$modal.confirm('是否确认删除会员编号为"' + eid + '"的数据项？').then(function () {
          return delVip(eid);
        }).then(() => {
          this.getVipList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {
        });
      },
      /** 点击修改按钮修 */
      updateVip(row) {
        this.reset();
        // 声明拿到修改需要的ID
        const id = row.id;
        queryVipById(id).then(response => {
          this.form = response.data;
          this.title = "修改Vip信息";
          this.open = true;
        });
      },
      /** 点击确认按钮 */
      submitForm() {
        if (this.form.id != null) {
          updateVip(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.open = false;
            this.getVipList();
          });
        }

      },
      /*
      搜索框调用的函数
       */
      souButoon() {
        const eid = this.ID;
        if (eid === "") {
          this.getVipList();
        } else {
          updateAndQuery(eid).then(response => {
            this.vipList = response.data;
          });
        }
      },
      //重置输入框的数据
      reset() {
        this.form = {
          name: null,
          phone: null,
          storageMoney: null
        };
        this.form = {
          vid: null,
          vtype: null,
        };
        this.Cvalue = null;
        this.resetForm("form");
      },
      //点击上一页的函数
      getPrePage(val) {
        console.log(val)
        this.queryParams.pageNo = val;
        this.getVipList();
      },
      //拿到下一页的页码
      getNextPage(val) {
        this.queryParams.pageNo = val;
        this.getVipList();
      },
      //页码发生改变时拿到当前页码
      handleCurrentChange(val) {
        this.queryParams.pageNo = val;
        this.getVipList();
      },
      handleAdd() {
        this.addOpen = true;
        this.reset();
      },
      addSubmit() {
        addVip(this.addForm, this.Cvalue).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.addOpen = false;
          this.getVipList();
        });
      },
      changeCustomer() {
        console.log(this.Cvalue)
      }

    },
    created() {
      this.getVipList();
    }
  }
</script>

<style scoped>
  .app {
    margin-top: 20px;

  }

  .top {
    margin-left: -10px;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  .demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
  }
</style>
